<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <el-link href="/#/home"
          ><p class="title">乐字节&nbsp;-&nbsp;云E办</p></el-link
        >

        <div class="personalCenter">
          <el-badge is-dot class="item">
            <el-button
              icon="el-icon-bell"
              size="medium"
              @click="goChat"
              circle
            ></el-button>
          </el-badge>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <i
                ><el-avatar class="userFace" :src="user.userFace"></el-avatar
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled>{{ user.name }}</el-dropdown-item>
              <el-dropdown-item command="userInfo" divided
                >个人中心
              </el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item command="logout">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="asideWidth" class="homeAside">
          <el-switch
            v-model="asideCollapse"
            active-color="#13ce66"
            inactive-color="#cacaca"
            style="margin:5px 0 10px 10px "
          ></el-switch>
          <el-menu
            class="el-menu-vertical-demo"
            :collapse="!asideCollapse"
            router
            unique-opened
          >
            <el-submenu
              v-for="(item, index) in routes"
              :key="index"
              :index="index + ''"
            >
              <template slot="title"
                ><i
                  :class="item.iconCls"
                  style="font-size: 25px; color: rgb(95,158,160);margin:0 15px 0 0"
                ></i
                ><span style="font-size: 18px">{{ item.name }}</span></template
              >
              <el-menu-item
                :index="children.path"
                v-for="(children, indexj) in item.children"
                :key="indexj"
                ><span style="font-size: 16px; margin-left: 30px">{{
                  children.name
                }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            v-if="this.$router.currentRoute.path !== '/home'"
            class="breadcrumb perBorder"
          >
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="$router.currentRoute.redirectedFrom"
              >首页
            </el-breadcrumb-item>
            <el-breadcrumb-item
              >{{ this.$router.currentRoute.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <yeb-home v-if="this.$router.currentRoute.path === '/home'"
            ><p>云E办系统首页</p></yeb-home
          >
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import yebHome from "../components/yebHome";

export default {
  name: "Home",
  //首页组件，内容只有一句欢迎词
  components: { yebHome },
  data() {
    return {
      //内存中的用户信息
      user: JSON.parse(window.sessionStorage.getItem("user")),
      //导航菜单默认折叠状态
      asideCollapse: false,
      //导航菜单宽度初始化，不初始化这一下，折叠动画后侧边栏宽度不消失
      asideWidth: ""
    };
  },
  methods: {
    //下拉菜单功能，实现了退出登录
    handleCommand(command) {
      //点击退出登录选项
      if (command === "logout") {
        this.$confirm("你确定要退出登录吗？", "退出提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.postRequest("/logout").then(resp => {
              if (resp) {
                window.sessionStorage.removeItem("tokenStr");
                window.sessionStorage.removeItem("user");
                this.$store.commit("initRoutes", []);
              }
              this.$router.replace("/");
            });
          })
          .catch(() => {
            this.$message.info("已取消操作！");
          });
      }
      if (command === "userInfo") {
        this.$router.replace("/userInfo");
      }
    },
    //聊天页面跳转
    goChat() {
      this.$router.push("/chat");
    }
  },
  computed: {
    //监听属性，类似data，取出路由信息
    routes() {
      return this.$store.state.routes;
      // .filter((item) => {
      //     return !item.hidden;
      //   });
    }
  }
};
</script>
<style>
.homeHeader {
  background-color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 5px 0 10px 0;
}

.homeHeader .title {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: rgb(95, 158, 160);
}

.homeAside {
  margin-top: 6px;
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.userFace {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: solid 1px #dcdfe6;
  background-size: cover;
}

.breadcrumb {
  font-size: 18px;
  margin: 0 0 20px 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 300px;
  min-height: 100vh;
}
.personalCenter {
  display: flex;
  justify-content: center;
}
.item {
  margin-right: 30px;
}
</style>
